<script setup lang="ts">
	// * 商家销售统计图表组件
	import * as echarts from 'echarts'
	import { ref, onMounted, reactive, onUnmounted, watch } from 'vue'
	import { sellerApi } from '@/api/modules/data'
	import { useTheme } from '@/components/hooks/useTheme'
	const { theme } = useTheme()

	// 容器实例
	const fullRef = ref<HTMLDivElement>()
	// 图表状态数据
	const state = reactive({
		chartsData: [],
		pageable: {
			currentPage: 1,
			pageSize: 5
		}
	})

	// echarts实例
	let myEcharts: echarts.ECharts = null
	// 定时器ID
	let timerId = null

	// 监听主题的切换 调用初始化
	watch(theme, () => {
		// 图表销毁
		myEcharts.dispose()
		initCharts()
		getData()
		screenAdapter()
	})

	// * 初始化图表
	const initCharts = () => {
		// 初始化
		myEcharts = echarts.init(fullRef.value, theme.value)
		// 配置
		const option: echarts.EChartsOption = {
			// 标题
			title: { text: '| 商家销售统计', top: 20, left: 20 },
			// 图表位置
			grid: { top: '20%', left: '3%', right: '6%', bottom: '3%', containLabel: true },
			// 提示栏
			tooltip: {
				trigger: 'axis',
				axisPointer: { type: 'shadow', z: 1, shadowStyle: { color: '#2D3443' } }
			},
			xAxis: { type: 'value' },
			yAxis: { type: 'category' },
			series: [
				{
					type: 'bar',
					label: { show: true, position: 'right' },
					itemStyle: {
						// 渐变色设置
						color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
							{ offset: 0, color: '#5052EE' },
							{ offset: 1, color: '#AB6EE6' }
						])
					}
				}
			]
		}
		// 设置配置
		myEcharts.setOption(option)
		// 给图表绑定移入 移出
		myEcharts.on('mouseover', () => {
			clearInterval(timerId)
		})
		myEcharts.on('mouseout', () => {
			autoPaly()
		})
	}

	// * 获取数据
	const getData = async () => {
		// 发起请求
		const { data } = await sellerApi()
		// 对数据进行排序 降序
		data.sort((a, b) => a.value - b.value)
		state.chartsData = data
		// 更新配置
		updateCharts()
		// 开启自动翻页
		autoPaly()
	}

	// * 更新配置项
	const updateCharts = () => {
		const { currentPage, pageSize } = state.pageable
		// 每页显示5条  【通过slice方法实现分页显示】
		const s = (currentPage - 1) * pageSize
		const e = currentPage * pageSize
		const data = state.chartsData.slice(s, e)
		// 准备图表数据
		const nameData = data.map(item => item.name)
		const valueData = data.map(item => item.value)
		// 配置项
		const updateOption: echarts.EChartsOption = {
			yAxis: { data: nameData },
			series: [{ data: valueData }]
		}
		// 设置配置项
		myEcharts.setOption(updateOption)
		// 大于最大页码 ?  1 : +1
		const total = Math.ceil(state.chartsData.length / pageSize)
		currentPage === total ? (state.pageable.currentPage = 1) : state.pageable.currentPage++
	}

	// * 开启自动翻页
	const autoPaly = () => {
		if (timerId) clearInterval(timerId)
		timerId = setInterval(() => {
			updateCharts()
		}, 3000)
	}

	// * 分辨率适配
	const screenAdapter = () => {
		// 移动端适配:  650px 标题大小20px
		// 650px / 20px  = 3.25
		// 100比例  6.5px
		const size = (fullRef.value.offsetWidth / 100) * 3.25
		// 设置配置
		const adapterOption: echarts.EChartsOption = {
			// 标题
			title: { textStyle: { fontSize: size } },
			// 数据
			series: [{ barWidth: size * 1.1, itemStyle: { borderRadius: [0, size, size, 0] } }]
		}
		// 更新配置
		myEcharts.setOption(adapterOption)
		myEcharts.resize()
	}

	// 实例挂载后（渲染后）
	onMounted(() => {
		initCharts()
		getData()
		window.addEventListener('resize', screenAdapter)
		screenAdapter()
	})

	// 实例销毁后
	onUnmounted(() => {
		window.removeEventListener('resize', screenAdapter)
		clearInterval(timerId)
	})

	defineExpose({ resize: screenAdapter })
</script>

<template>
	<div class="full_container" ref="fullRef"></div>
</template>

<style scoped lang="scss"></style>
